<section id="buttons">
    <h2 class="page-header">Buttons</h2>
    <div class="row">
        <div class="span3">
            <p>
                <a class="btn" href="#">
                    <i class="icon-repeat"></i>Reload</a>
                <a class="btn btn-success" href="#">
                    <i class="icon-shopping-cart icon-large"></i>Checkout</a>
            </p>
            <p>
                <a class="btn btn-large btn-primary" href="#">
                    <i class="icon-comment"></i>Comment</a>
                <a class="btn btn-small btn-info" href="#">
                    <i class="icon-info-sign"></i>Info</a>
            </p>
            <p>
                <a class="btn btn-danger" href="#">
                    <i class="icon-trash icon-large"></i>Delete</a>
                <a class="btn btn-small" href="#">
                    <i class="icon-cog"></i>Settings</a>
            </p>
            <p>
                <a class="btn btn-large btn-danger" href="#">
                    <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>
                    Version {{ site.fontawesome.version }}</a>
            </p>
            <p>
                <a class="btn btn-primary" href="#">
                    <i class="icon-refresh icon-spin"></i>Synchronizing Content...</a>
            </p>
        </div>
        <div class="span9">
            <p>
                Font Awesome icons work great in buttons. You can even combine them with larger icon styles,

                <code>pull-right</code> and <code>pull-left</code>, and <code>icon-spin</code>.
            </p>
            {% highlight html %}
            <a class="btn" href="#">
                <i class="icon-repeat"></i>Reload</a>
            <a class="btn btn-success" href="#">
                <i class="icon-shopping-cart icon-large"></i>Checkout</a>
            <a class="btn btn-large btn-primary" href="#">
                <i class="icon-comment"></i>Comment</a>
            <a class="btn btn-small btn-info" href="#">
                <i class="icon-info-sign"></i>Info</a>
            <a class="btn btn-danger" href="#">
                <i class="icon-trash icon-large"></i>Delete</a>
            <a class="btn btn-small" href="#">
                <i class="icon-cog"></i>Settings</a>
            <a class="btn btn-large btn-danger" href="#">
                <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>
                Version {{ site.fontawesome.version }}</a>
            <a class="btn btn-primary" href="#">
                <i class="icon-refresh icon-spin"></i>Synchronizing Content...</a>
            {% endhighlight %}
        </div>
    </div>
</section>